import React, { useState, useRef, useEffect } from 'react';

interface MagnifierTooltipProps {
  children: React.ReactNode;
  title: string;
  imageUrl: string;
  className?: string;
}

const MagnifierTooltip: React.FC<MagnifierTooltipProps> = ({ 
  children, 
  title, 
  imageUrl, 
  className = '' 
}) => {
  const [isVisible, setIsVisible] = useState(false);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const containerRef = useRef<HTMLDivElement>(null);
  const tooltipRef = useRef<HTMLDivElement>(null);

  const handleMouseEnter = (e: React.MouseEvent) => {
    setIsVisible(true);
    updatePosition(e);
  };

  const handleMouseMove = (e: React.MouseEvent) => {
    if (isVisible) {
      updatePosition(e);
    }
  };

  const handleMouseLeave = () => {
    setIsVisible(false);
  };

  const updatePosition = (e: React.MouseEvent) => {
    const rect = containerRef.current?.getBoundingClientRect();
    if (rect) {
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      setPosition({ x, y });
    }
  };

  useEffect(() => {
    if (isVisible && tooltipRef.current) {
      const tooltip = tooltipRef.current;
      const rect = tooltip.getBoundingClientRect();
      const viewportWidth = window.innerWidth;
      const viewportHeight = window.innerHeight;
      
      let adjustedX = position.x + 20;
      let adjustedY = position.y - 10;
      
      // 防止超出右边界
      if (adjustedX + rect.width > viewportWidth) {
        adjustedX = position.x - rect.width - 20;
      }
      
      // 防止超出下边界
      if (adjustedY + rect.height > viewportHeight) {
        adjustedY = position.y - rect.height - 10;
      }
      
      // 防止超出上边界
      if (adjustedY < 0) {
        adjustedY = position.y + 20;
      }
      
      // 防止超出左边界
      if (adjustedX < 0) {
        adjustedX = position.x + 20;
      }
      
      tooltip.style.left = `${adjustedX}px`;
      tooltip.style.top = `${adjustedY}px`;
    }
  }, [position, isVisible]);

  return (
    <div 
      ref={containerRef}
      className={`relative ${className}`}
      onMouseEnter={handleMouseEnter}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
    >
      {children}
      
      {isVisible && (
        <div 
          ref={tooltipRef}
          className="fixed z-[9999] pointer-events-none"
          style={{
            left: `${position.x + 20}px`,
            top: `${position.y - 10}px`
          }}
        >
          <div className="bg-base-100 border border-base-300 rounded-lg shadow-xl p-3 max-w-xs">
            <div className="flex flex-col items-center gap-2">
              <div className="w-32 h-32 rounded-lg overflow-hidden border border-base-300">
                <img 
                  src={imageUrl} 
                  alt={title}
                  className="w-full h-full object-cover transform scale-110 hover:scale-125 transition-transform duration-200"
                />
              </div>
              <div className="text-center">
                <h4 className="font-semibold text-sm text-base-content truncate max-w-full">
                  {title}
                </h4>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default MagnifierTooltip;